// 图片轮播图功能
function initImageCarousel() {
    const imgList = document.querySelectorAll('.carousel-img');
    const imgDotsContainer = document.getElementById('img-dots');
    let imgIndex = 0;

    // 显示图片
    function showImg(idx) {
        imgList.forEach((img, i) => img.classList.toggle('active', i === idx));
        Array.from(imgDotsContainer.children).forEach((dot, i) => 
            dot.classList.toggle('active', i === idx));
    }

    // 下一张图片
    function nextImg() {
        imgIndex = (imgIndex + 1) % imgList.length;
        showImg(imgIndex);
    }

    // 生成图片指示点
    imgList.forEach((_, i) => {
        const dot = document.createElement('span');
        dot.className = i === 0 ? 'active' : '';
        dot.onclick = () => {
            imgIndex = i;
            showImg(imgIndex);
        };
        imgDotsContainer.appendChild(dot);
    });

    // 自动播放图片
    setInterval(nextImg, 3000);
}

// 文字轮播图功能
function initTextCarousel() {
    const textList = document.querySelectorAll('#text-carousel li');
    const textCarousel = document.getElementById('text-carousel');
    let textIdx = 0;

    // 显示文字
    function showText(idx) {
        textCarousel.style.transform = `translateY(-${idx * 44}px)`;
    }

    // 自动播放文字
    setInterval(() => {
        textIdx = (textIdx + 1) % textList.length;
        showText(textIdx);
    }, 2200);
}

// 页面加载完成后初始化两个轮播图
document.addEventListener('DOMContentLoaded', () => {
    initImageCarousel();
    initTextCarousel();
});

// 导航切换
document.querySelectorAll('nav a').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelectorAll('nav a').forEach(a => a.classList.remove('active'));
        this.classList.add('active');
        document.querySelectorAll('main section').forEach(sec => sec.classList.remove('active'));
        document.getElementById(this.dataset.section).classList.add('active');
        window.scrollTo({top:0,behavior:'smooth'});
    });
});

// tab切换（hover切换）
document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.onmouseenter = function() {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
        document.getElementById('tab-' + this.dataset.tab).classList.add('active');
    }
});

// 添加到hupu.js
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有导航链接
    const navLinks = document.querySelectorAll('.nav-left a');
    // 获取所有内容区域
    const sections = document.querySelectorAll('section');

    // 为每个导航链接添加点击事件
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有导航链接的active类
            navLinks.forEach(l => l.classList.remove('active'));
            // 为当前点击的链接添加active类
            this.classList.add('active');

            // 获取目标section的id
            const targetId = this.getAttribute('data-section');
            
            // 隐藏所有section
            sections.forEach(section => {
                section.style.display = 'none';
            });
            
            // 显示目标section
            const targetSection = document.getElementById(targetId);
            if (targetSection) {
                targetSection.style.display = 'block';
            }
        });
    });

    // 默认显示首页
    document.querySelector('a[data-section="home"]').click();
});

// 今日赛程轮播图控制
document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.getElementById('games-carousel');
    const slides = carousel.getElementsByClassName('game-slide');
    const prevButton = document.getElementById('games-prev');
    const nextButton = document.getElementById('games-next');
    let currentSlide = 0;

    function showSlide(n) {
        // 隐藏所有幻灯片
        for (let i = 0; i < slides.length; i++) {
            slides[i].classList.remove('active');
        }
        // 显示当前幻灯片
        slides[currentSlide].classList.add('active');
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % slides.length;
        showSlide(currentSlide);
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + slides.length) % slides.length;
        showSlide(currentSlide);
    }

    // 绑定按钮事件
    prevButton.addEventListener('click', prevSlide);
    nextButton.addEventListener('click', nextSlide);

});

// 点赞功能
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有点赞按钮
    const likeButtons = document.querySelectorAll('.like-btn');
    
    likeButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 获取当前点赞数
            const likeCount = this.querySelector('span');
            const currentCount = parseInt(likeCount.textContent.match(/\d+/)[0]);
            
            // 切换点赞状态
            if (this.classList.contains('liked')) {
                // 取消点赞
                this.classList.remove('liked');
                likeCount.textContent = `点赞 (${currentCount - 1})`;
                this.style.color = '#666';
            } else {
                // 添加点赞
                this.classList.add('liked');
                likeCount.textContent = `点赞 (${currentCount + 1})`;
                this.style.color = '#1e88e5';
            }
        });
    });

    // 评论功能
    const commentButtons = document.querySelectorAll('.comment-btn');
    
    commentButtons.forEach(button => {
        button.addEventListener('click', function() {
            const postItem = this.closest('.post-item');
            const commentsSection = postItem.querySelector('.comments-section');
            
            // 如果评论框已存在，则移除
            const existingCommentBox = commentsSection.querySelector('.comment-input-box');
            if (existingCommentBox) {
                existingCommentBox.remove();
                return;
            }

            // 创建评论输入框
            const commentBox = document.createElement('div');
            commentBox.className = 'comment-input-box';
            commentBox.innerHTML = `
                <textarea placeholder="写下你的评论，注意文明用语..." class="comment-textarea"></textarea>
                <div class="comment-submit-box">
                    <button class="comment-submit-btn">发表评论</button>
                </div>
            `;

            // 插入评论框
            commentsSection.insertBefore(commentBox, commentsSection.firstChild);

            // 添加发表评论事件
            const submitBtn = commentBox.querySelector('.comment-submit-btn');
            const textarea = commentBox.querySelector('.comment-textarea');

            submitBtn.addEventListener('click', function() {
                const commentText = textarea.value.trim();
                if (commentText) {
                    // 创建新评论
                    const newComment = document.createElement('div');
                    newComment.className = 'comment-item';
                    newComment.innerHTML = `
                        <img src="https://i1.hoopchina.com.cn/newsPost/1734068438251_o_w_190_h_174_618a9f66.jpg?x-oss-process=image/resize,w_800/format,webp" alt="评论用户头像" class="comment-avatar">
                        <div class="comment-content">
                            <div class="comment-author">我</div>
                            <p>${commentText}</p>
                            <div class="comment-actions">
                                <button class="comment-like-btn">点赞 (0)</button>
                                <button class="comment-reply-btn">回复</button>
                            </div>
                        </div>
                    `;

                    // 添加新评论
                    commentsSection.insertBefore(newComment, commentBox);
                    
                    // 清空输入框
                    textarea.value = '';
                    
                    // 更新评论数
                    const commentCount = button.querySelector('span');
                    const currentCount = parseInt(commentCount.textContent.match(/\d+/)[0]);
                    commentCount.textContent = `评论 (${currentCount + 1})`;

                    // 为新评论添加交互功能
                    addCommentInteractions(newComment);
                }
            });
        });
    });

    // 为所有评论添加交互功能
    function addCommentInteractions(commentElement) {
        // 点赞功能
        const likeBtn = commentElement.querySelector('.comment-like-btn');
        if (likeBtn) {
            likeBtn.addEventListener('click', function() {
                const likeCount = parseInt(this.textContent.match(/\d+/)[0]);
                if (this.classList.contains('liked')) {
                    this.textContent = `点赞 (${likeCount - 1})`;
                    this.classList.remove('liked');
                } else {
                    this.textContent = `点赞 (${likeCount + 1})`;
                    this.classList.add('liked');
                }
            });
        }

        // 回复功能
        const replyBtn = commentElement.querySelector('.comment-reply-btn');
        if (replyBtn) {
            replyBtn.addEventListener('click', function() {
                const commentContent = this.closest('.comment-content');
                const existingReplyBox = commentContent.querySelector('.reply-input-box');
                
                if (existingReplyBox) {
                    existingReplyBox.remove();
                    return;
                }

                const replyBox = document.createElement('div');
                replyBox.className = 'reply-input-box';
                replyBox.innerHTML = `
                    <textarea placeholder="回复评论..." class="reply-textarea"></textarea>
                    <div class="reply-submit-box">
                        <button class="reply-submit-btn">发表回复</button>
                        <button class="reply-cancel-btn">取消</button>
                    </div>
                `;

                commentContent.appendChild(replyBox);

                // 添加回复提交事件
                const submitBtn = replyBox.querySelector('.reply-submit-btn');
                const cancelBtn = replyBox.querySelector('.reply-cancel-btn');
                const textarea = replyBox.querySelector('.reply-textarea');

                submitBtn.addEventListener('click', function() {
                    const replyText = textarea.value.trim();
                    if (replyText) {
                        const replyItem = document.createElement('div');
                        replyItem.className = 'reply-item';
                        replyItem.innerHTML = `
                            <img src="https://i1.hoopchina.com.cn/newsPost/1734068438251_o_w_190_h_174_618a9f66.jpg?x-oss-process=image/resize,w_800/format,webp" alt="回复用户头像" class="reply-avatar">
                            <div class="reply-content">
                                <div class="reply-author">我</div>
                                <p>${replyText}</p>
                                <div class="reply-actions">
                                    <button class="reply-like-btn">点赞 (0)</button>
                                </div>
                            </div>
                        `;

                        const repliesContainer = commentContent.querySelector('.replies-container') || 
                            (() => {
                                const container = document.createElement('div');
                                container.className = 'replies-container';
                                commentContent.appendChild(container);
                                return container;
                            })();

                        repliesContainer.appendChild(replyItem);
                        replyBox.remove();

                        // 为回复添加点赞功能
                        const replyLikeBtn = replyItem.querySelector('.reply-like-btn');
                        replyLikeBtn.addEventListener('click', function() {
                            const likeCount = parseInt(this.textContent.match(/\d+/)[0]);
                            if (this.classList.contains('liked')) {
                                this.textContent = `点赞 (${likeCount - 1})`;
                                this.classList.remove('liked');
                            } else {
                                this.textContent = `点赞 (${likeCount + 1})`;
                                this.classList.add('liked');
                            }
                        });
                    }
                });

                cancelBtn.addEventListener('click', function() {
                    replyBox.remove();
                });
            });
        }
    }

    // 为页面加载时已存在的评论添加交互功能
    document.querySelectorAll('.comment-item').forEach(addCommentInteractions);
});